import React, { Component } from 'react';
import { Row, Col, Card } from 'antd';

export default class cardDemo extends Component{
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        const { data, title } = this.props;
        return (
            <div>
                <Card type={'inner'} title={title} style={{textAlign: 'center'}}>
                    <Row style={{marginBottom: '20px'}}>
                        <Col span={4}>
                            <div style={{fontWeight: 'bold'}}>{data.name}</div>
                        </Col>
                        <Col span={4}>
                            <div>进件总条数</div>
                        </Col>
                        <Col span={4}>
                            <div>正常应还总金额</div>
                        </Col>
                        <Col span={5}>
                            <div>应还总金额(+滞纳金)</div>
                        </Col>
                        <Col span={4}>
                            <div>滞纳金</div>
                        </Col>
                    </Row>
                    <Row style={{marginBottom: '20px'}}>
                        <Col span={4}>
                            <div>应催回数</div>
                        </Col>
                        <Col span={4}>
                            <div>{data.num}</div>
                        </Col>
                        <Col span={4}>
                            <div>{data.htMoney}</div>
                        </Col>
                        <Col span={5}>
                            <div>{data.needPayAll}</div>
                        </Col>
                        <Col span={4}>
                            <div>{data.needPayOver}</div>
                        </Col>
                    </Row>
                    <Row style={{marginBottom: '20px'}}>
                        <Col span={4}>
                            <div>实际催回数</div>
                        </Col>
                        <Col span={4}>
                            <div>{data.chNum}</div>
                        </Col>
                        <Col span={4}>
                            <div>{data.chHtMoney}</div>
                        </Col>
                        <Col span={5}>
                            <div>{data.chTotalMoney}</div>
                        </Col>
                        <Col span={4}>
                            <div>{data.chOverMoney}</div>
                        </Col>
                    </Row>
                    <Row style={{marginBottom: '20px'}}>
                        <Col span={4}>
                            <div>催回率</div>
                        </Col>
                        <Col span={4}>
                            <div>{data.ctl1 ? `${data.ctl1}%` : ''}</div>
                        </Col>
                        <Col span={4}>
                            <div>{data.ctl2 ? `${data.ctl2}%` : ''}</div>
                        </Col>
                        <Col span={5}>
                            <div>{data.ctl3 ? `${data.ctl3}%` : ''}</div>
                        </Col>
                        <Col span={4}>
                            <div>{data.ctl4 ? `${data.ctl4}%` : ''}</div>
                        </Col>
                    </Row>
                </Card>
            </div>
        );

    }
}
